<template>
  <div class="base-echarts">
    <div class="echarts" ref="echartsRef" :style="{ height: canvasHeight }"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watchEffect } from 'vue';
import * as echarts from 'echarts';
import type { EChartsOption } from 'echarts';
import ChinaJSON from '../data/china.json';

echarts.registerMap('china', ChinaJSON as any);

interface IProps {
  canvasHeight?: string;
  options: EChartsOption;
}

const props = withDefaults(defineProps<IProps>(), {
  canvasHeight: '300px'
});

const echartsRef = ref<HTMLElement>();
onMounted(() => {
  const echartsEl = echarts.init(echartsRef.value, 'light', {
    renderer: 'canvas'
  });
  watchEffect(() => {
    echartsEl.setOption(props.options);
  });
  window.addEventListener('resize', () => {
    echartsEl.resize();
  });
  setTimeout(() => {
    echartsEl.setOption(props.options);
  }, 1000);
});
</script>

<style scoped lang="scss">
.base-echarts {
  height: fit-content;
  width: 100%;
  .echarts {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
